<template>
<div class="tw-libcaptcha-verify">
  <div :style="{'max-width':parseInt(imgSize.width)+30+'px'}">
    <div class="verifybox-bottom">
      <!-- 验证码容器 -->
      <components
        v-if="componentType"
        :is="componentType"
        :captchaType="captchaType"
        :type="verifyType"
        :explain="explain"
        :imgSize="imgSize"
        :blockSize="blockSize"
        :barSize="barSize"
        :captchaColor="captchaColor"
        ref="instance">
      </components>
    </div>
  </div>
</div>
</template>
<script>
import VerifySlide from './VerifySlide'
import VerifyPoints from './VerifyPoints'

export default {
  name: 'Vue2Verify',
  props: {
    captchaType: {
      type: String,
      required: true
    },
    explain: {
      type: String
    },
    imgSize: {
      type: Object,
      default () {
        return {
          width: '330px',
          height: '155px'
        }
      }
    },
    blockSize: {
      type: Object
    },
    barSize: {
      type: Object
    },
    captchaColor: {
      type: Object,
      default () {
        return {
          movColor: '#5cb85c',
          sucColor: '#0a77f5',
          errColor: '#d9534f'
        }
      }
    }
  },
  data() {
    return {
      // 内部类型
      verifyType: undefined,
      // 所用组件类型
      componentType: undefined
    }
  },
  methods: {
    refresh () {
      if (this.instance.refresh) {
        this.instance.refresh()
      }
    },
    closeBox (){
      this.refresh()
    }
  },
  computed: {
    instance () {
      return this.$refs.instance || {}
    }
  },
  watch: {
    captchaType:{
      immediate: true,
      handler(captchaType) {
        switch (captchaType.toString()) {
          case 'slide':
            this.verifyType = '2'
            this.componentType = 'VerifySlide'
            break
          case 'click':
            this.verifyType = ''
            this.componentType = 'VerifyPoints'
            break
        }
      }
    },
  },
  components: {
    VerifySlide,
    VerifyPoints
  },
}
</script>
<style lang="scss">
.tw-libcaptcha-verify {
  .verifybox-bottom{
    padding: 0;
    box-sizing: border-box;
  }
  .verify-tips{
    position: absolute;
    left: 0px;
    bottom:0px;
    width: 100%;
    height: 30px;
    line-height:30px;
    color: #fff;
  }
  .suc-bg{
    background-color:rgba(10,119,245,.5);
    filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7f5CB85C, endcolorstr=#7f5CB85C);
  }
  .err-bg{
    background-color:rgba(217, 83, 79,.5);
    filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7fD9534F, endcolorstr=#7fD9534F);
  }

  /*滑动验证码*/
  .verify-bar-area {
    position: relative;
    background: #FFFFFF;
    text-align: center;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    border: 1px solid #ddd;
    -webkit-border-radius: 4px;
  }

  .verify-bar-area .verify-move-block {
    position: absolute;
    top: 0px;
    left: 0;
    background: #fff;
    cursor: pointer;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    box-shadow: 0 0 2px #888888;
    -webkit-border-radius: 1px;
  }

  .verify-bar-area .verify-move-block:hover {
    background-color: #5cb85c;
    color: #FFFFFF;
  }

  .verify-bar-area .verify-left-bar {
    position: absolute;
    top: -1px;
    left: -1px;
    background: #f0fff0;
    cursor: pointer;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    border: 1px solid #ddd;
  }

  .verify-img-panel {
    margin: 0;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    border-radius: 3px;
    position: relative;
  }

  .verify-img-panel .verify-refresh {
    width: 25px;
    height: 25px;
    text-align: center;
    padding: 5px;
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
  }

  .verify-img-panel .icon-refresh {
    font-size: 20px;
    color: #fff;
  }

  .verify-img-panel .verify-gap {
    background-color: #fff;
    position: relative;
    z-index: 2;
    border: 1px solid #fff;
  }

  .verify-bar-area .verify-move-block .verify-sub-block {
    position: absolute;
    text-align: center;
    z-index: 3;
  }

  .verify-bar-area .verify-move-block .verify-icon {
    font-size: 18px;
  }

  .verify-bar-area .verify-msg {
    z-index: 3;
  }

  .iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .icon-check:before {
    content: " ";
    display: block;
    width: 16px;
    height: 16px;
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 9999;
    background-size: contain;
  }

  .icon-close:before {
    content: " ";
    display: block;
    width: 16px;
    height: 16px;
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 9999;
    background-size: contain;
  }

  .icon-right:before {
    content: " ";
    display: block;
    width: 16px;
    height: 16px;
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-size: cover;
    z-index: 9999;
    background-size: contain;
  }

  .icon-refresh:before {
    content: " ";
    display: block;
    width: 16px;
    height: 16px;
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 9999;
    background-size: contain;
  }
}
</style>
